import React, { Component } from 'react';
import { Layout, Carousel, Tabs, Card, } from 'antd';
import { RightOutlined, PlayCircleOutlined } from '@ant-design/icons';
import axios from 'axios'
import MyNavLink from '../../components/MyNavLink'
import './index.css'
const { Content } = Layout;
const { TabPane } = Tabs;
const { Meta } = Card;
export default class index extends Component {
  state = {
    lunbo: [],
    result: [],
    userlist: [],
    djlist: [],
    data: [],
    musiclist: []
  }
  componentDidMount() {
    //轮播
    axios.get('http://iwenwiki.com:3000/personalized/privatecontent/list').then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ lunbo: response.data.result })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )
    // 推荐歌单
    axios.get('http://iwenwiki.com:3000/personalized?limit=10').then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ result: response.data.result })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )
    // 热门播客
    axios.get('http://iwenwiki.com:3000/top/artists?limit=10').then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ userlist: response.data.artists })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )

    //独家放送
    axios.get('http://iwenwiki.com:3000/personalized/privatecontent/list').then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ djlist: response.data.result })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )

    //最新音乐
    axios.get('http://iwenwiki.com:3000/personalized/newsong?limit=9').then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ musiclist: response.data.result })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )

    //推荐MV
    axios.get('http://iwenwiki.com:3000/mv/first?limit=13').then(
      //请求成功后，
      response => {
        // 数据请求成功后App更新状态(loading页面消失，数据页面出现)
        this.setState({ data: response.data.data })
      },
      errer => {
        //数据请求失败后App更新状态
        console.log('没有数据', errer);
      }
    )
  };
  render() {
    const contentStyle = {
      height: '400px',
    };
    function callback(key) {
      console.log(key);
    }
    const newLunbo = this.state.lunbo
    const newResult = this.state.result
    const newUserlist = this.state.userlist
    const newDjlist = this.state.djlist
    const newMusicList = this.state.musiclist.slice(1)
    const newData = this.state.data.slice(1)
    return (
      <Content>
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="个性推荐" key="1">
            <div className="inner">
              <Carousel autoplay >
                {
                  newLunbo.map(item => {
                    return (
                      <div key={item.id}>
                        <img style={contentStyle} src={item.picUrl} alt="" />
                      </div>
                    )
                  })
                }
              </Carousel>
              <h3>推荐歌单</h3><RightOutlined />
              <div className="cards">
                {
                  newResult.map(item => {
                    return (
                      <MyNavLink to={`/musiclist/${item.id}`} key={item.id}>
                        <Card
                          hoverable
                          style={{ width: 185 }}
                          cover={<img alt={item.copywriter} src={item.picUrl} />}
                        >
                          <Meta title={item.name} />
                        </Card>
                      </MyNavLink>
                    )
                  })
                }
              </div>
              <h3>热门客播</h3><RightOutlined />
              <div className=''>
                {
                  newUserlist.map(item => {
                    return (
                      <div className='hotlist' key={item.id}>
                        <img src={item.picUrl} alt="" />
                        <div className='hotlistcount'>
                          <h3>{item.name}</h3>
                          <p>{item.alias[0]}</p>
                          <p>{ }</p>
                        </div>
                      </div>
                    )
                  })

                }
              </div>


              <h3>独家放送</h3><RightOutlined />
              <div className="cards">
                {
                  newDjlist.map(item => {
                    return (
                      <Card
                        key={item.id}
                        hoverable
                        style={{ width: 320 }}
                        cover={<img alt={item.copywriter} src={item.sPicUrl} />}
                      >
                        <Meta title={item.name} />
                      </Card>
                    )
                  })
                }
              </div>
              <h3>最新音乐</h3><RightOutlined />
              <div className='newmusic'>
                {
                  newMusicList.map(item => {
                    return (
                      <div className='newmusiclist' key={item.id}>
                        <img src={item.picUrl} alt="" />
                        <div className='content'>
                          <h3>{item.name}</h3>
                          <p>简介</p>
                        </div>
                      </div>
                    )
                  })
                }


              </div>
              <h3>推荐MV</h3><RightOutlined />
              <div className="cards">
                {
                  newData.map(item => {
                    return (
                      <MyNavLink to={`/mvlist/${item.id}`} key={item.id}>
                        <Card
                          hoverable
                          style={{ width: 235 }}
                          cover={<img alt={item.artistName} src={item.cover} />}
                        >
                          <Meta title={item.name} /><PlayCircleOutlined />
                        </Card>
                      </MyNavLink>
                    )
                  })
                }
              </div>

            </div>
          </TabPane>


          <TabPane tab="专属定制" key="2">
            Content of Tab Pane 2
          </TabPane>
          <TabPane tab="歌单" key="3">
            Content of Tab Pane 3
          </TabPane>
          <TabPane tab="排行榜" key="4">
            Content of Tab Pane 3
          </TabPane>
          <TabPane tab="歌手" key="5">
            Content of Tab Pane 3
          </TabPane>
          <TabPane tab="最新影月" key="6">
            Content of Tab Pane 3
          </TabPane>
        </Tabs>
      </Content>
    );
  }
}
